<template>
  <div class="tab-bar" :class="{'is-fixed':fixed}">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'tab-bar',
  props: {
    fixed: Boolean,
    value: {}
  }
}
</script>
<style lang="scss" scoped>
@import '../../common/style/mixin.scss';
.tab-bar{
  background-image:linear-gradient(180deg, $color-grey, $color-grey 50%, transparent 50%);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: top left;
  position: relative;
  background-color: $tabbar-background-color;
  display: flex;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  text-align: center;
  .is-fixed {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: $z-index-normal;
  }
  .is-selected {
    color: $tabbar-tab-item-selected-color;
  }
}
</style>
